<template>
  <div>
    <el-row style="text-align: right;margin:0 20px 20px 0">
      <el-col>
        <el-button size="mini" type="success" @click="openDialog">新增</el-button>
      </el-col>

    </el-row>

    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children:'children',hasChildren:'hasChildren'}">
      <el-table-column
          prop="name"
          label="名称"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限编码"
          sortable
          width="180">
      </el-table-column>

      <el-table-column
          prop="icon"
          label="图标">
      </el-table-column>

      <el-table-column
          prop="type"
          label="类型">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.type === 0">目录</el-tag>
          <el-tag size="small" v-else-if="scope.row.type === 1" type="success">菜单</el-tag>
          <el-tag size="small" v-else-if="scope.row.type === 2" type="info">按钮</el-tag>
        </template>

      </el-table-column>

      <el-table-column
          prop="path"
          label="菜单URL">
      </el-table-column>
      <el-table-column
          prop="component"
          label="菜单组件">
      </el-table-column>
      <el-table-column
          prop="ordernum"
          label="排序号">
      </el-table-column>
      <el-table-column
          prop="statu"
          label="状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
          <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
        </template>

      </el-table-column>
      <el-table-column
          prop="icon"
          label="操作">

        <template slot-scope="scope">
          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="确定删除吗？" @confirm="delHandle(scope.row.id)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>

        </template>
      </el-table-column>
    </el-table>

    <!--  新增，编辑对话框-->
    <menu-dialog ref="menuDialog" @handle="handle"/>
  </div>
</template>

<script>
import {getMenuList, delItemById} from "@/api/sys/menu";

import MenuDialog from "@/views/sys/Menu/MenuDialog";

export default {
  name: "Menu",
  components: {MenuDialog},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
    }
  },
  created() {
    this.getMenuTree()
  },
  methods: {
    //加载数据
    getMenuTree() {
      this.loading = true
      getMenuList().then(res => {
        let treeData = this.handleTree(res.data, "id", "parentId")
        // console.log(treeData)
        this.tableData = treeData
        this.loading = false
      })
    },
    //  树形数据格式化
    handleTree(data, id, parentId) {
      id = id || 'id'
      parentId = parentId || 'parentId'
      //对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      //循环所有项
      const treeData = cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
          //返回每一项的子级数组
          return father[id] === child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        //返回第一层
        return father[parentId] === "0";
      });
      return treeData !== '' ? treeData : data;
    },

    openDialog() {
      this.$refs.menuDialog.setTableData(this.tableData)
      this.$refs.menuDialog.openDialog()
    },
    //表格条目编辑
    editHandle(id) {
      this.$refs.menuDialog.setEditForm(id)
      this.$refs.menuDialog.setTableData(this.tableData)
      this.$refs.menuDialog.openDialog()
    }
    ,
    //表格条目删除
    delHandle(id) {
      delItemById(id).then(res => {
            this.getMenuTree();
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getMenuTree()
              }
            })
          }
      )
    },
    handle(res) {
      if (res.code === 200) {
        this.getMenuTree()
      }
    }

  },
}
</script>

<style scoped>

</style>
